<template>
  <div class="table-container">
    <div class="flex flex-align-center flex-justify-between marB20">
      <div class="leftBox">错题回顾</div>
      <div class="rightBox">错题练习</div>
    </div>
    <el-table :data="tableData" border v-loading="loading" stripe
      header-cell-class-name="custom-header custom-header-height" cell-class-name="custom-cell"
      row-class-name="custom-row">
      <!-- <el-table-column prop="subject" label="错题汇总" /> -->
      <el-table-column prop="source" label="科目" #default="scoped">
        {{ categoryList[scoped.row.categoryId] }}
      </el-table-column>
      <el-table-column prop="createItem" label="车型" #default="scoped">
        {{ carList[scoped.row.carModelId] }}
      </el-table-column>
      <el-table-column label="错题数量" #default="scoped">
        {{ scoped.row.answeredQuestions - scoped.row.correctQuestions }}
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <div class="practice" @click="toPractice(scope.row.examId)">错题练习</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowRightBold, Setting, Delete } from '@element-plus/icons-vue'
import { getDailyStatistics, clearBytype } from '@/api/userApi'
import { useUserStore } from '@/store/user'
import { ElMessage, ElLoading } from 'element-plus'
import { getExamAll } from '@/api/userApi'
const router = useRouter()

const userStore = useUserStore()

const tableData = ref()

const loading = ref(false)

const categoryList = ref<any>({
  1: '科目一',
  2: '科目二',
  3: '科目三',
  4: '科目四',
  5: '注销恢复',
  6: '满分学习',
  7: '三力测试',
})

const carList = ref<any>({
  1: '小车（C1,C2,C3）',
  2: '货车（A2,B2）',
  3: '客车（A1,A3,B1）',
  5: '轻型牵引挂车（C6）',
  8: '摩托车（D,E,F）',
})

const getData = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
  })
  try {
    const res = await getExamAll({
      memberId: userStore.storeInfo.memberId,
      carModelId: userStore.storeInfo.carModelId,
      categoryId: userStore.categoryId
    })
    if (res.code === '00000' && res.data) {
      tableData.value = res.data
    }
  } catch { } finally { loading.close() }
}

const toPractice = (e: any) => {
  router.push({ path: 'wrongExam', query: { examId: e } })
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.table-container {
  padding: rem(20) rem(60);
}

.marB20 {
  margin-bottom: rem(20);
}

.leftBox {
  color: #344053;
  font-size: rem(30);
  font-weight: 500;
}

.rightBox {
  color: #fff;
  font-size: rem(30);
  font-weight: 500;
  background-color: #cf5a5b;
  padding: rem(10) rem(20);
  border-radius: rem(4);
}

:deep(.custom-row) {
  height: rem(50);
}

// 表头内容样式
:deep(.custom-header, .custom-header-height) {
  height: rem(50);
}

// 表格内容样式
:deep(.custom-cell) {}

.practice {
  color: #6fb7ff;
  cursor: pointer;
}
</style>
